<template>
  <div>
    <div class="content">
      <ul>
        <li v-for="(l,index) in articleList">
          <div class="imgs">
            <span class="name">『{{l.category_name}}』</span>
            <img :src="'http://api.ishuhui.com/'+l.thumb" alt="">
            
          </div>
          <p class="title">{{l.title}}</p>
          <router-link :to="'/article/'+l.id">
            <span>阅读全文>></span>
          </router-link>
          <p class="time"> <time>{{l.time}}</time> </p>
        </li>
      </ul>
    </div>

    <div class="cont">
      <el-pagination layout="prev, pager, next" :total="pages" @current-change="cli" class="page">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        articleId: "",
        articleList: [],
        pages: 1,
      }
    },
    methods: {
      article(val) {
        this.axios.get('http://api.ishuhui.com/article/list/ver/' + this.articleId + '/page/' + val + '.json')
          .then(data => {
            // console.log(data)
            this.articleList = data.data.data.data
            this.pages = data.data.data.count
            // console.log(this.articleList)
          })
          .catch(err => {
            console.log(err)
          })
      },
      cli() {
        //   console.log(arguments[0])
        this.article(arguments[0])
      }

    },
    created() {
      this.articleId = localStorage.getItem('article')
      this.article(1)

    }
  }

</script>
<style scoped>
  .content {
    padding: 0 15px;
  }
  
  .imgs {
    width: 4rem;
    float: left;
    margin-right: 10px;
    position: relative;
  }
  .content li{
      margin: 10px 0;
      overflow: hidden;
      box-shadow: 2px 2px 5px lightgrey;
      border-radius: 10px;
  }
  .content img {
    width: 100%;
  }
  
  .title{
    color: #fe330b;
    font-size: .4rem;
  }
  .time{
    text-align: right;
    /*display: inline-block;*/
    vertical-align: bottom;
    padding-right: 15px;
  }
  .name{
      position: absolute;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, .6);
      color: white;
      padding: 5px 10px;
      border-radius: 5px 0 0 5px;
  }
  .cont {
    text-align: center;
  }
  
  .page {
    display: inline-block;
  }

</style>
